<!-- 套餐详情 -->
<template>
	<view class="index-page">
		<view class="topbackground">
			<view class="header" :style="{ paddingTop: heightConfig.navBarPaddingTop + 'px' }">
				<view class="Narbar_bo">
					<view @click="back"><u-icon name="arrow-left"></u-icon></view>
					<view class="title" size="19px">套餐详情</view>
					<view></view>
				</view>
				<view class="backImag">
					<!-- <image :src="url+exanmeData.imagePath" mode=""></image> -->
					<swiper :indicator-dots="true" :autoplay="true" circular :interval="3000" :duration="1000" indicator-color="#DAEFFF;">
					    <swiper-item v-for="(item,index) in exanmeData.imagePath" :key="index">
					        <view class="swiper-item">
					            <image :src="url+item" mode="" style="width: 686rpx; height: 270rpx;"></image>
					        </view>
					    </swiper-item>
					    
					</swiper>
				</view>
				<view class="hosInf">

					<view class="priceFirst">
						<view class="price" style="width: 152rpx;height: 50rpx; color: red;">
							<!-- <image src="/static/images2/套餐详情￥172.png" mode="" style="width: 100%;height: 100%;"></image> -->
							￥{{exanmeData.price * number}}
						</view>
						<!--                        <view class="sellIma">
                            <image src="/static/images2/套餐详情页售出图标.png" mode="" style="width: 100%;height: 100%;">
                            </image>
                        </view>
                        <view class="aleSel">
                            已售3667
                        </view> -->
					</view>

					<view class="" style="display:flex; ">
						<view class="ruZhi">
							<!-- 常规入职检 (需带一寸照片，只有纸质报告) -->
							{{exanmeData.setMealName}}
						</view>
						<!-- <view class=""
							style="display:flex; justify-content: center;align-items: center; margin:18rpx 0 0 44rpx;">
							<view class="jian">
								<image @click="jianjian" src="/static/images2/套餐详情减.png" mode=""></image>
							</view>
							<view class="yi"> {{number}}</view>
							<view class="jia"  @click="add">
								<image src="/static/images2/套餐详情加.png" mode=""></image>
							</view>
						</view> -->
					</view>
					<view class="" style="display: flex;" >
						<view class="yuQu" >
							<view class="yuQuDi">
								院区地址
							</view>
							<view class="yuQuName">
								江夏区古驿道85号
							</view>
						</view>
						<view class="yuQuAdd" @click="toMap">
							<image src="/static/images2/map.png" mode=""></image>
						</view>
						<view class="yuQuPho">
							<image src="/static/images2/phone.png" mode="" @click="phone"></image>
						</view>
					</view>
					<view class="" style="display: flex;margin:22rpx 0 0 32rpx;">
						<view class="yingYe">
							营业时间 
						</view>
						<view class="rightRow" style="margin-top: 0rpx; margin-left: 10rpx;">
							<image src="/static/images2/right.png" mode=""></image>
						</view>
					</view>

					<view class=""
						style="display: flex;align-items: center;justify-content: left;  margin:22rpx 0 0 32rpx;">
						<view class="yingYeImg">
							<image src="/static/images2/work.png" mode=""></image>
						</view>
						<view class="yingYeSJ">
							门诊营业时间周一到周五，早上8:00-晚上18:00
						</view>

					</view>
				</view>

				<view class="tcDetail">
					<view class="topInfo" style="margin: 30rpx 0 0 32rpx;">
						<view class="border">
						</view>
						<view class="hosLev">
							套餐详情
						</view>
					</view>
					<view class="xindiantuBox" v-for="item in exanmeData.projectList">
						<view class="xindiantu">
							{{item.projectName}}
						</view>
						<view class="xindiantuInfo">
							{{item.projectNameDescription}}
						</view>
					</view>
					<view class="topInfo">
						<view class="border" style="">
						</view>
						<view class="hosLev" style="">
							 {{contentData[1].title}}
						</view>
					</view>
					<view style="display: flex;">
						<view class="dot">

						</view>
						<view class="neiRong"  v-html="contentData[1].content">
							
						</view>
					</view>
					<view style="height:650rpx;">
						<view class="topInfo">
							<view class="border">
							</view>
							<view class="hosLev" style="">
							 {{contentData[0].title}}
							</view>
						</view>
						<view class="guiZe" style="margin: 10rpx 0 0 50rpx;" v-html="contentData[0].content" >
							
						</view>
						<view class="" style="display: flex;">

							<view class="ganTanImg">
								<image src="/static/images2/bottom.png" mode="widthFix"
									style="width: 100%;height: 100%;"></image>
							</view>
							<view class="tiShi">
								注:在线退号仅支持在江夏区纸坊街卫生服务中心小程序所挂的号。
							</view>
						</view>
						<view class="buyCli" @click="buy">
							<view class="buy">点击购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {baseUrl} from "@/config.js"
	import api from "@/api/homePage";
	import loginApi from "@/api/login";
	import mine from "@/api/mine.js"
	import {
		getToken
	} from "@/utils/auth";
	import {
		getQueryString
	} from "@/utils/index";

	export default {
		name: "Index",
		components: {},
		data() {
			return {
				number:1,
				tuiGaiList: [{
						message: '1.未到就诊当天可在线退号，就诊当天未取号可在11:30前在自助机或窗口进行退号，已取号凭挂号单在16: 30前到窗口办理退号退费，逾期将不可办理退号退费。'
					},
					{
						message: '2.同一患者，一日内退号了次或一月内退号5次将无法进行线上挂号，退号，时间以退号时间开始计算。'
					},
					{
						message: '3.同一患者，一日内预约未支付5次或每周7次将无法进行线上挂号。时间以预约未支付时间开始计算。'
					},
				],
				jCXuZhiList: [{
						info: '预约:部分检查需提前预约 (如MRI、胃肠镜)，可通过医院平台或现场办理'
					},
					{
						info: '登记签到: 按预约时间到指定科室登记，排队等候叫号。'
					},
					{
						info: '配合操作:如彩超需暴露检查部位，CT/MRI需去除金属物品，保持体位静止'
					},

				],
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				taoCanList: [{
						name: '心电图',
						info: '检查心脏功能是否正常'
					},
					{
						name: '血常规',
						info: '有无贫血、血小板减少、血液病及炎症'
					},
					{
						name: '肝功能 (6项)',
						info: '了解肝脏功能，有无肝功能损害等'
					},
					{
						name: '肾功能 (6项)',
						info: '有无贫血、血小板减少、血液病及炎症'
					},
					{
						name: '尿液常规检查',
						info: '了解血液病及炎症'
					}
				],
				
				codeUserId: null, // 上级id
				heightConfig: {},
				keyword: "",
				swiperList: [], // 轮播
				profileList: [], // 简介
				referralsList: [],
				transitionShow: true,
				transitionMode: "slide-right",
				iconShow: true,
				iconMode: "slide-up",
				exanmeData: {},
				url:"",
				contentData:[]
			};
		},
		onLoad(optsions) {
			let _this = this
			uni.getSystemInfo({
				success(res) {
					_this.heightConfig.navBarPaddingTop = res.statusBarHeight // 单位：px
					console.log(res.statusBarHeight)
				}
			})
			console.log(optsions, "查询参数")
			const data = JSON.parse(decodeURIComponent(optsions.data));
			data.imagePath = data.imagePath.split(',');
			this.exanmeData = data
        
			console.log(data,"套餐详情")
   
			//   this.mainHeight = this.$store.getters.heightData.noTabMainHeight;
			//   this.heightConfig = this.$store.getters.heightData;

			//   // this.getReferralsList();

			//   const q = decodeURIComponent(query.q);
			//   let userId = getQueryString(q, "userId");
			//   this.codeUserId = userId || null;
			//   uni.setStorageSync("codeUserId", this.codeUserId);

			//   if (this.codeUserId) {
			//       let userInfo = uni.getStorageSync("userInfo");
			//       console.log(userInfo, 'userInfo');
			//       let obj = {
			//           promotionId: this.codeUserId,
			//           userId: userInfo.userId
			//       }
			//       console.log(obj, "obj");
			//       loginApi.binding(obj).then((res) => {
			//           if (res.code == 200) {

			//           } else {

			//           }
			//       });
			//   }
		},
		async mounted(){
			 this.url = baseUrl
			 const res = await mine.getContentList()
			 res.rows.forEach((item)=>{
				   if(item.type == 3){
					   this.contentData.push(item)
				   }else if(item.type == 2){
					    this.contentData.push(item)
				   }
			 })
			 console.log(this.contentData,'内容')
		},
		onShow() {
			let launchOptions = uni.getLaunchOptionsSync();
			// 获取场景值 1011 - 扫描二维码进入
			if (launchOptions.scene == 1011) {
				let userInfo = uni.getStorageSync("userInfo");
				const token = getToken();
				if (userInfo.flag) {
					uni.showToast({
						title: `您的上级是${userInfo.parentNickName}`,
						icon: "none",
					});
				}
				if (!token) {
					uni.navigateTo({
						url: `/pages/login?codeUserId=${this.codeUserId}`,
					});
				}
			}
		},
		onReady() {},
		methods: {
			phone(){
				wx.makePhoneCall({
					phoneNumber: "4001-111-111",
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			jianjian(){
				if(this.number<=1) return
				this.number--
			},
			add(){
				this.number++
			},
			back() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			// 预约
			appointMent() {
				uni.navigateTo({
					url: "/subPages/appointMent/appointMnetDataSele",
				})
			},
			buy() {
		        this.exanmeData['number'] = this.number
				uni.navigateTo({
					// url: "/subPages/meaDetail/meaDetailPayment",   
                    
					url: `/subPages/hosPacDetails/hosPacDetails?data=${encodeURIComponent(JSON.stringify(this.exanmeData))}`,

				})
			},

			// banner
			getBannerList() {
				api.getBannerList().then((res) => {
					if (res.code == 200) {
						this.swiperList = [];
						this.profileList = [];
						res.data.forEach((element) => {
							if (element.type == 1) {
								this.swiperList.push(element);
							}
							if (element.type == 2) {
								this.profileList.push(element);
							}
						});
					}
				});
			},
			// 推荐
			getReferralsList() {
				api.getReferralsList().then((res) => {
					if (res.code == 200) {
						this.referralsList = res.data;
					}
				});
			},
			swiperSkip(index, type) {
				if (type == 1) {
					// 轮播图跳转
					if (this.swiperList[index].goodId) {
						uni.navigateTo({
							url: `/subPages/details/goodDetail?id=${this.swiperList[index].goodId}`,
						});
					}
				} else if (type == 2) {
					// 主页大图跳转
					if (this.profileList[index].goodId) {
						uni.navigateTo({
							url: `/subPages/details/goodDetail?id=${this.profileList[index].goodId}`,
						});
					}
				}
			},
			searchFocus() {
				uni.navigateTo({
					url: "/subPages/details/searchPage",
				});
			},
			toMap(){
				 uni.navigateTo({
				 	url: "/subPages/meaDetail/map",
				 });
			},
			switchIcon() {
				this.iconShow = !this.iconShow;
			},
			pageScroll() {
				let transitionShow = this.transitionShow;
				if (transitionShow) this.transitionShow = false;
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.transitionShow = true;
					clearTimeout(this.timer);
				}, 1000);
			},
			clickNavigation(item) {
				const token = getToken();
				if (!token) {
					uni.navigateTo({
						// url: "/pages/login",
					});
				} else {
					if (item.id == 1) {
						// 专属福利
					} else if (item.id == 2) {
						// 客服
					} else if (item.id == 3) {
						// 购物车
						uni.switchTab({
							url: "/pages/shopCar",
						});
					} else if (item.id == 4) {
						// 活动订阅
					}
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	* {
		margin: 0;
		padding: 0;
		// background: #F7F8FA;
		// height: 1556rpx;
	}

	.topbackground {
		width: 100%;
		height: 344rpx;
		// background: url("/static/images2/首页顶部背景图.png") no-repeat;
		// background-size: 100% 100%;
	}

	.index-page {

		width: 750rpx;
		height: 100vh;
		overflow-y: scroll;
		background: #F7F8FA;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-direction: column;
		// background-color: #fff;

		.header {
			width: 100%;
			// padding: 0 20rpx;
			// background-color: #fff;

			.logo {
				width: 200rpx;
				height: 60rpx;
				// background-color: #fee7eb;
				border-radius: 20px;
				text-align: center;
				line-height: 60rpx;
				margin: 0 auto;
			}

			.search {
				width: 670rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				// padding: 20rpx 0;
				margin-left: 40rpx;
				margin-top: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.Narbar_bo {
			width: 100%;
			height: 35px;
			display: flex;
			padding: 0 28rpx;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 18px;
				font-weight: 600;
			}
		}
	}

	.backImag {
		margin: 10rpx 0 0 32rpx;
		width: 686rpx;
		height: 308rpx;
		background: #F3F3F3;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		image {
			height: 100%;
			width: 100%;
		}
	}

	.border {
		margin-top: 10rpx;
		width: 8rpx;
		height: 24rpx;
		background: #159DFF;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
	}

	.hosInf {
		width: 748rpx;
		height: 392rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
	}

	.price {
		margin: 34rpx 0 0 40rpx;
		width: 152rpx;
		height: 50rpx;
		font-family: Douyin Sans, Douyin Sans;
		font-weight: bold;
		font-size: 42rpx;
		// color: #EB5432;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.sellIma {
		margin: 42rpx 0 0 386rpx;
		width: 28rpx;
		height: 28rpx;
		// background: #FF9279;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.priceFirst {
		display: flex;

	}

	.aleSel {
		margin: 38rpx 0 0 0;
		width: 106rpx;
		height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #777777;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.ruZhi {
		
	    margin-top: 20rpx;
		box-sizing: border-box;
		margin-left:32rpx;
		// width: 532rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		// text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.jian {
		// margin:
		width: 30rpx;
		height: 30rpx;
        margin-left: 10rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.jia {
		width: 30rpx;
		height: 30rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yi {
		margin: 0 14rpx 0;
		width: 12rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1677FF;
		// text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.yuQu {
		margin: 24rpx 0 0 32rpx;
		// width: 198rpx;
		// height: 34rpx;

	}

	.yuQuDi {
		// margin:24rpx 0 0 4rpx;
		width: 198rpx;
		height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.yuQuAdd {
		margin: 44rpx 0 0 378rpx;
		width: 38rpx;
		height: 38rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yuQuPho {
		margin: 44rpx 0 0 16rpx;
		width: 38rpx;
		height: 38rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yuQuName {
		width: 198rpx;
		height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
	
		margin-left: -5rpx;
		color: #777777;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.yingYe {
		width: 96rpx;
		height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.rightRow {
		margin: 6rpx 0 0 0rpx;
		width: 32rpx;
		height: 34rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yingYeImg {
		height: 30rpx;
		width: 30rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yingYeSJ {
		margin-left: 5rpx;
		width: 592rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #777777;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.tcDetail {
		// margin:
		width: 750rpx;
		// height: 1556rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.topInfo {
		display: flex;
		align-items: center;
		justify-content: left;
		width: 686rpx;
		margin: 0rpx 0 0 32rpx;
		// display: flex;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;

	}

	.hosLev {
		margin-left: 10rpx;
		margin-top: 34rpx;
		// width: 112rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.border {
		margin-top: 36rpx;
		width: 10rpx;
		height: 36rpx;
		background: #159DFF;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
	}

	.xindiantuBox {
		padding: 15rpx;
		// display: flex;
		// justify-content: space-between;
		margin: 24rpx 0 0 32rpx;
		width: 686rpx;
		// height: 100%;
	    // align-items: center;
		background: #F8FCFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.xindiantu {
		// width: 84rpx;
        
	  
		font-family: PingFang SC, PingFang SC;
		font-weight: 550;
		width: 200rpx;
		font-size: 25rpx;
		color: #000000;
		// overflow: hidden;
			 overflow-x: scroll;
		white-space: nowrap; /* 超出的空白区域不换行 */
		font-style: normal;
		text-transform: none;
	}

	.xindiantuInfo {
		// margin-left: 334rpx;
		// width: 240rpx;
		// height: 34rpx;
		// width: 400rpx;
		font-family: PingFang SC, PingFang SC;
		 
		display: flex;

		font-size: 24rpx;
		color: #777777;
		margin-top: 10rpx;
		font-style: normal;
		text-transform: none;
	}

	.dot {
		margin: 40rpx 10rpx 0 32rpx;
		width: 12rpx;
		height: 12rpx;
		background: #FF9279;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.neiRong {
		margin: 24rpx 0 0 0;
		width: 668rpx;
		// height: 72rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.guiZe {
		// margin: 24rpx 0 0 0;
		width: 678rpx;
		// height: 115rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.tiShi {
		// position: absolute;

		margin: 16rpx 0 0 0;
		width: 668rpx;
		height: 72rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #777777;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.buyCli {
		// position: fixed;left: 186rpx;bottom: env(safe-area-inset-bottom); 
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		margin-bottom: calc(24rpx + env(safe-area-inset-bottom));
		// bottom: 20rpx;
		// left: 186rpx;
		// right: 0;
		// padding: 24rpx;
		// padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		// padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		// z-index: 50;
		// position: fixed;
		// // top:5rpx;
		// bottom: 0rpx;
		// left: 186rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 378rpx;
		height: 76rpx;
		background: #159DFF;
		border-radius: 88rpx 88rpx 88rpx 88rpx;

	}

	.buy {
		width: 104rpx;
		height: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.ganTanImg {
		width: 26rpx;
		heihgt: 26rpx;
		margin: 22rpx 0 0 28rpx;
	}
</style>